<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue"></script>
    <!-- 会使用最新版本，你最好指定一个版本 -->
    <script src="https://unpkg.com/naive-ui"></script>
    <script src="./lib/utils-lib-js.js"></script>
    <style>
        html,
        body,
        .root {
            box-sizing: border-box;
        }

        .root {
            padding: 20px;

        }

        .data-table {
            margin-top: 20px;
        }

        .actions {
            display: flex;
            justify-content: space-between;
        }
    </style>
</head>

<body>
    <div class="root" id="app">
        <n-drawer v-model:show="drawerActive" :width="800" placement="right">
            <n-drawer-content :title="`${isNew?'添加':'编辑'}关键字`">
                <n-form ref="formRef" :rules="rules" :model="modelRef">
                    <section v-for="({key, title}) in formList" :key="key">
                        <n-form-item :path="key" :key="key" :label="title" :path="key">
                            <n-input v-model:value="modelRef[key]" :placeholder="`请输入${title}`" />
                        </n-form-item>
                    </section>
                    <n-button round type="primary" @click="handleSubmit">
                        {{isNew?'添加':'编辑'}}
                    </n-button>
                </n-form>
            </n-drawer-content>

        </n-drawer>
        <div class="actions">
            <n-button @click="createAnswer">新建关键字</n-button>
            <n-switch :on-update:value="handleSwitch" :default-value="true">
                <template #checked>
                    查看全部
                </template>
                <template #unchecked>
                    只查看拓展
                </template>
            </n-switch>
        </div>

        <n-data-table class="data-table" :columns="columns" :data="data" :max-height="600" :scroll-x="800"
            virtual-scroll />
    </div>
    <script>
        const { ref, h, watchEffect } = Vue;
        const { createDiscreteApi, NButton } = naive;
        const _columns = [{
            title: '标题',
            key: 'label',
            width: 200,
            fixed: 'left'
        }, {
            title: '关键字',
            key: 'name',
            width: 200,
        }, {
            title: '提示语',
            key: 'return',
            width: 200,
        }, {
            title: '取值',
            key: 'value',
            width: 200,
        }]
        const rules = {}
        _columns.forEach(item => {
            rules[item.key] = [{ required: true, message: `请输入${item.title}`, trigger: ['blur', 'input'] }]
        })
        const { Request } = UtilsLib;
        const request = new Request("http://127.0.0.1:4096");
        const defaultOpts = {
            headers: {
                'Content-Type': 'application/json',
            },
        }

        const App = {
            setup() {
                const { message } = createDiscreteApi(['message'])
                const data = ref([]);
                const isNew = ref(true);
                const drawerActive = ref(false);
                const formRef = ref();
                const modelRef = ref({})
                const showAll = ref(true);
                const getAnswer = () => {
                    const params = {}
                    showAll.value && (params.showAll = showAll.value)
                    return request.GET("/answer", params).then((res) => {
                        data.value = res;
                    });
                }
                const createAnswer = () => {
                    modelRef.value = {};
                    isNew.value = true;
                    drawerActive.value = true;
                }
                const handleSubmit = () => {
                    formRef.value.validate((errors) => {
                        if (!errors) {
                            const reqFn = isNew.value ? request.POST : request.PUT;
                            return reqFn("/answer", {}, modelRef.value, defaultOpts).then((res) => {
                                res.msg && message.info(res.msg)
                                getAnswer();
                                drawerActive.value = false;
                            });
                            console.log('success', modelRef.value)
                        } else {
                            console.log('errors', errors)
                        }
                    })
                }
                const handleSwitch = (show) => {
                    showAll.value = show
                }
                const edit = (row) => {
                    isNew.value = false;
                    modelRef.value = row;
                    drawerActive.value = true;
                }
                const copy = (row) => {
                    isNew.value = true;
                    modelRef.value = row;
                    drawerActive.value = true;
                }
                const del = (row) => {
                    return request.DELETE("/answer", row, {}, defaultOpts).then((res) => {
                        res.msg && message.info(res.msg)
                        getAnswer();
                    });
                }

                watchEffect(() => getAnswer())
                const columns = _columns.concat([{
                    title: '操作',
                    key: 'action',
                    width: 200,
                    render(row) {
                        return h('div', [
                            h(
                                NButton,
                                {
                                    onClick: () => edit(row)
                                },
                                { default: () => '编辑' }
                            ),
                            h(
                                NButton,
                                {
                                    onClick: () => copy(row)
                                },
                                { default: () => '复制' }
                            ),
                            h(
                                NButton,
                                {
                                    onClick: () => del(row),
                                    type: 'error'
                                },
                                { default: () => '删除' }
                            )
                        ])
                    }
                }])
                return {
                    formValue: {},
                    rules,
                    handleSubmit,
                    modelRef,
                    formRef,
                    drawerActive,
                    data,
                    columns,
                    formList: _columns,
                    isNew,
                    handleSwitch,
                    createAnswer
                };
            },
        };
        const app = Vue.createApp(App);
        app.use(naive)
        app.mount("#app");
    </script>

</body>

</html>